<template>
    <div class="scrollbox">
        <!-- 头部 -->
        <v-header></v-header>
        <div class="dis10"></div>
        <div class="listbox aps9">
            <v-list
                    api="user.get_user_list"
                    ref="list"
                    cards="1"
                    :params="params"
            >
                <template slot="search">
                    <el-button
                            class="operate"
                            size="small"
                            type="primary"
                            icon="el-icon-plus"
                            @click="edit(params)"
                    >添加</el-button>&nbsp;&nbsp;&nbsp;
                    <el-button
                            v-if="userinfo.role != 'view'"
                            class="operate"
                            size="small"
                            type="primary"
                            icon="el-icon-sort"
                            @click="generate()"
                            style="float: right"
                    >生成缓存
                    </el-button>&nbsp;
                </template>
                <template slot="head" slot-scope="props">
                    <thead>
                    <tr class="tr">
                        <th class="c1">用户</th>
                        <th>账号</th>
                        <th>手机</th>
                        <th>邮箱</th>
                        <th>登录IP</th>
                        <th>登陆时间</th>
                        <th>注册IP</th>
                        <th>注册时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </template>
                <template slot="item" slot-scope="props">
                    <tr>
                        <td class="font-blue" @click="setBaseInfo(props.item)">
                            <a href="javascript:void(0)" class="font-blue f14">
                                <span v-if="!props.item.nick">-</span>
                                {{ props.item.nick }}
                                <span
                                        class="font-gray2 f11"
                                >({{ props.item.uid }})</span>
                            </a>
                        </td>
                        <td class="font-gray2">{{ props.item.uname || '-' }}</td>
                        <td class="font-gray2">{{ props.item.mobile || '-' }}</td>
                        <td class="font-gray2">
                            <span v-if="!props.item.email">-</span>
                            {{props.item.email}}
                        </td>
                        <td class="font-gray2">
                            <span v-if="!props.item.logip">-</span>
                            {{props.item.logip}}
                        </td>
                        <td class="font-gray2">
                            {{props.item.logdateline | dateFormat("yyyy-MM-dd HH:mm")}}
                        </td>
                        <td class="font-gray2">
                            <span v-if="!props.item.regip">-</span>
                            {{props.item.regip}}
                        </td>
                        <td class="font-gray2">
                            {{props.item.regdateline | dateFormat("yyyy-MM-dd HH:mm")}}
                        </td>
                        <td style="width: 110px">
                            <el-button
                                    size="mini"
                                    title="编辑"
                                    icon="el-icon-edit"
                                    type="primary"
                                    circle
                                    @click="edit(props.item)"
                            ></el-button>
                            <el-button
                                    v-if="props.item.uid"
                                    size="mini"
                                    title="清除缓存"
                                    icon="el-icon-coin"
                                    type="default"
                                    circle
                                    @click="clear(props.item)"
                            ></el-button>
                        </td>
                    </tr>
                </template>
            </v-list>
        </div>

        <!-- 编辑 -->
        <el-dialog :title="editData.title" :visible.sync="editData.status" width="680px" top="7vh">
            <div class="dialogform">
                <el-form
                        :model="form"
                        :rules="rules"
                        ref="form"
                        label-width="120px"
                        label-position="right"
                        class="demo-ruleForm"
                >
                    <el-form-item label="账号">
                        <el-input v-model="form.uname"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" >
                        <el-input v-model="form.upass" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="form.email"></el-input>
                    </el-form-item>
                    <el-form-item label="手机">
                        <el-input v-model="form.mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称">
                        <el-input v-model="form.nick" class="w200"></el-input>
                    </el-form-item>
                    <el-form-item label="权限">
                        <el-select v-model="form.role" class="w200" @change="$forceUpdate()">
                            <el-option
                                    v-for="(item, index) in allRole"
                                    :value="item.value"
                                    :label="item.label"
                                    :key="index"
                            ></el-option>
                        </el-select>
                        <!--<el-input v-model="form.role" class="w200"></el-input>-->
                    </el-form-item>
                    <el-form-item label prop="inlock">
                        <el-button type="primary" @click="save">保 存</el-button>
                        <el-button @click="editData.status = false">取 消</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="tc"></div>
        </el-dialog>
        <!-- 编辑结束 -->
    </div>
</template>
<script>
  import { cacheUserinfo } from "@cache";
  export default {
    data() {
      return {
        form: {
          uid: 0,
          uname: "",
          upass: "",
          email: "",
          mobile: "",
          nick: "",
        },
        userinfo:{},
        allRole:[{value:'super',label:'超级管理员'},{value:'admin',label:'管理员'},{value:'edit',label:'编辑'},{value:'view',label:'浏览'}],
        editData: {
          status: false,
          title: "",
          id: 0
        },
        rules: {
          upass: [
            {
              type: "string",
              required: true,
              message: "请输入密码",
              trigger: "blur"
            },
            { min: 1, message: "密码不能为空", trigger: "blur" }
          ]
        },
        params: {},
        drawer: {
          show: false,
          data: {},
          name: "会员管理"
        },
        menu: [],
        purMenu: [],
        loading: false
      };
    },
    watch: {
      "drawer.show": {
        handler(newV) {
          if (!newV) {
            this.drawer.data = null;
            this.purMenu = [];
          }
        }
      }
    },
    methods: {
      edit(item) {
        if(JSON.stringify(item) === '{}'){
          this.editData.title = '添加会员信息'
        }else{
          this.editData.title = '修改会员信息'
        }
        // console.log(this.form)
        this.editData.status = true;
        this.editData.id = item.uid || 0;
        this.form.uid = item.uid || 0;
        this.form.uname = item.uname || "";
        this.form.upass = item.upass || "";
        this.form.email = item.email || "";
        this.form.mobile = item.mobile || "";
        this.form.nick = item.nick || "";
        this.form.role = item.role || "";
      },
      save() {
        let that = this;
        that.$refs["form"].validate(valid => {
          if (valid) {
            let url = that.editData.id > 0 ? "user.edit_user" : "user.add_user";
            that.$api.jpost(url, that.form).then(res => {
              if (res.status === 1) {
                this.$success(res.msg);
                that.$refs.list.fetchData();
                that.editData.status = false;
              } else {
                that.$error(res.msg);
              }
            }).catch(()=>{});
          }
        });
      },
      // 清除缓存
      clear( item) {
        this.$api.get("user.clear_user_cache",{ uid: item.uid }).then(res => {
          if (res.status === 1) {
            this.$success(res.msg);
            this.$refs.list.fetchData();
          }
        }).catch(()=>{});;
      },
      // 清除全局缓存
      generate () {
        let that = this
        this.$api.get("user.clear_all_user_cache").then(res => {
          if (res.status === 1) {
            that.$success(res.msg);
            that.$refs.list.fetchData();
          } else {
            that.$error(res.msg);
          }
        }).catch(()=>{});
      },
      del(row) {
        let that = this;
        that
            .$confirm("此操作会将该彻底删除，不可恢复, 是否继续?", "删除提醒")
            .then(() => {
              that.$api
                  .post("system.delete_sys_union", { id: row.id })
                  .then(res => {
                    if (res.status === 1) {
                      that.$success(res.msg);
                      that.$refs.list.fetchData();
                    } else {
                      that.$error(res.msg);
                    }
                  });
            })
            .catch(() => {});
      },
      setBaseInfo(item) {
        this.$api.get("user.get_user_detail", { uid: item.uid }).then(res => {
          this.drawer.data = res.data;
        }).catch(() => {});
        this.drawer.show = true;
      },
      addTemp() {
        this.loading = true;
        this.$api.jget("user.add_user_by_tmp").then(res => {
          if (res.status === 1) {
            this.params = {
              page: 1
            };
            this.loading = false;
            this.$success(res.msg);
          } else {
            this.$error(res.msg);
          }
        });
      }
    },
    mounted() {
      this.userinfo = cacheUserinfo.load()
      // console.log(this.userinfo)
      // this.getPurview();
      // this.getTest();

    }
  };
</script>

<style lang="scss" scoped>
    .tabs {
        width: 290px;
    }
</style>
